<template>
  <div class="flex justify-center w-full h-full divscroll" >
    <div class="flex flex-col h-full" style="width:800px;">
        <div class="lg:flex bg-white m-2 p-2 pl-6 rounded-lg shadow-sm" style="height:156px;">
          <Avatar :src="userinfo.avatarUrl || headerImg" :size="64" class="!mx-auto !block self-center " />
          <div class="md:ml-6 flex flex-col justify-center md:mt-0 mb-2">
            <div class="flex items-end" style="margin-bottom: .4em;">
              <div class=" text-md flex items-end ">{{ userinfo.userName }}</div>
              <a-button size="small" @click="openbaseupdate">
                  <EditOutlined class="text-black"/>
              </a-button>
            </div>
            <div class="flex flex-col">
              <div>余额：<span class="font-bold" style="font-size: 16px;">￥{{ member.amount }}</span></div>
              <div class="flex "><span class="flex self-center">{{member.memberinfo}}</span>
                <a-button type="link" :size="size" style="padding:0 5px" @click="showModal">{{member.buttontext}}</a-button></div>
            </div>
            
          </div>
          <div class="flex flex-1 justify-center md:mt-0 mt-4 flex-col" style="align-items: end;">
            <div class="flex ">
              <span style="font-size:16px;margin-bottom: 5px;"> 我的邀请码： {{userinfo.extend.extendS1}}</span>
              <!-- <div class="text-secondary" style="font-size: .9em;">邀请好友注册，享消费返还 
                <a-tooltip>
                  <template #title>点击查看返佣规则</template>
                  <question-circle-outlined @click="{visibleRule=true;}"/>
                </a-tooltip>
                
              </div> -->
            </div>
            <div class="flex mt-4">
               
              <a-button class="copy-btn" type="primary" shape="round"  :data-clipboard-text="copyContent">复制邀请链接</a-button>
            </div>
          </div>
        </div>
        
        <div class="m-2">
          <img src="../../../assets/images/banner-C0BUkXTL.jpg" style="width:1040px;height:182px;"/>
        </div>
        <div class="lg:flex flex-grow  bg-white  m-2  pl-4 rounded-lg shadow-sm">
          <a-tabs v-model:activeKey="activeKey" class="w-full" >
              <a-tab-pane key="1">
                <template #tab>
                  <span>
                    <UsergroupAddOutlined />
                    我的邀请记录
                  </span>
                </template>
             
              <QYrecordPage :qyjtype="0"/>
              </a-tab-pane>
              <a-tab-pane key="2">
                <template #tab>
                  <span>
                    <MoneyCollectOutlined />
                    我的佣金记录
                  </span>
                </template>
              <QyjrecordPage :qyjtype="1"/>
              </a-tab-pane>
              <a-tab-pane key="3">
                <template #tab>
                  <span>
                    <ShoppingOutlined />
                    我的付费记录
                  </span>
                </template>
                <UserOrderPage />
              </a-tab-pane>

              
            </a-tabs>
        </div>

        <!--会员选择 -->
        <a-modal v-model:visible="visible" :dialogClass="rounded-lg" title="" centered="true" 
          :footer="null" 
          width="60%" 
          :mask="true" 
          @ok="handleOk">
          <div style="background-color: #FFFFFF; padding: 60px" class="flex w-full justify-between flex-col">
            <div class="flex justify-center" 
              style="background-color: #ccfbf1; margin: 0 auto;margin-bottom: 20px;
                padding: .8em 50px; border-radius: 12px;color: #115e59;font-size: 16px;align-items: center;">
                <div class="flex mr-4" style="font-size: 20px;"><ShopOutlined/></div>
                <div class="flex flex-col">
                  <div>特别优惠:购买任意<a href="/dp/xinwen/zixun?activeKey=2" style="color:#115e59;font-weight: 600;">精选课程</a>，即可免费获赠一个月会员资格!</div>
                  <div>注册填写邀请码，与邀请人同享前3次课程消费10%的双向返佣!</div>
                </div>
              </div>
            <div class="flex justify-center font-bold" style="font-size: 26px;padding: .3em 0">选择合适您的会员计划</div>
            <div class="flex justify-center" style="margin-bottom: 2em;opacity: .8;">所有会员计划均可以访问系统核心功能</div>
            <div class="flex flex-row">
              <div class="flex flex-col flex-1 shadow rounded-lg  m-3 p-3"  v-for = "(item,index) in viplistdata" 
                @click="{activeItem = index;}"
                 :style="{'position':'relative','border':activeItem==index?'2px solid #025FFF':'1px solid #e5e5e5', 'border-radius':'12px'}" :key="index">
                 <div v-if="item.isrm=='1'" class="rmfn flex justify-center items-center font-bold" 
                 style="font-size:10px;color:#222222;">热门方案</div>
                  <div class="flex justify-center font-bold text-lg mb-3">{{item.title}} </div>
                  <div class="flex justify-center items-center">
                    <span class="line-through text-gray-500">原价￥{{item.oldprice}}</span>
                    <span class="time-youhui">限时优惠</span>
                  </div>
  
                  <div class="flex justify-center items-center">
                      <span class="font-bold" style="font-size: 24px;">￥{{item.price}}</span>
                      <span style="font-size: 12px; color:#7F7F7F" v-if="index==0">/周</span>
                      <span style="font-size: 12px; color:#7F7F7F" v-if="index==1">/月</span>
                      <span style="font-size: 12px; color:#7F7F7F" v-if="index==2">/年</span>
                  </div>
                   
                  <div  class="flex flex-col mt-2" :style="{ height: maxrowheight + 'em' }" >
                        <span v-for = "(qyitem,index) in item.qylist" style="font-size:14px;color:#212123;opacity: .8;">
                           <Icon icon="ant-design:check-outlined" style="color:green"/>&nbsp;&nbsp;&nbsp;{{qyitem}}
                        </span>
                  </div>
  
                  <div class="mt-3 ml-6 mr-6">
                      <a-button block="true" style="height: 36px;" type="primary" @click="goorderpage(item.id)" alt="立即购买">立即购买</a-button>
                  </div>
                    
              </div>
            </div>
            
        </div>
        </a-modal>

        <!--会员资料修改-->
        
        <a-modal
          centered="true"
          placement="right"
          :mask="true"
          width="50%"
          title="基本资料修改"
          :footer="null"
          :closable="true"
          :maskClosable="false"
          v-model:visible="visibleB"
          :after-visible-change="afterVisibleChange">
        <UserInfoUpdate />

        
      </a-modal>

        <!--订单页面抽屉-->
      <a-modal
          centered="true"
          :footer="null"
          width="40%"
          :closable="true"
          :maskClosable="false"
          v-model:visible="visibleD"
          :destroyOnClose="true"
          :after-visible-change="afterVisibleChange">
        <template #title>
          <span style="font-weight: 500; font-size:16px;padding:8px;">订单支付</span>
        </template>
          <OrdercrateAndPay ref="orderRef"  :preorderInfo="preorderInfo"  :status="status"  
          @changeorderstatus="changeorderstatus" @orderpaysuccess="orderpaysuccess"/>
      </a-modal>

      <a-modal
          centered="true"
          :footer="null"
          width="30%"
          :closable="true"
          :maskClosable="false"
          v-model:visible="visibleRule"
          :destroyOnClose="true">

          <div style="height: 400px;padding:35px">
            <div style="text-align: center; font-size: 20px; padding-top: 25px; font-weight: bold;">返佣规则</div>
            <div style="padding:8px 0; font-weight: bold;font-size: 16px;">细则如下：</div>
            <p>1.新用户必须通过您的专属邀请链接注册并首次登录，方可激活返佣资格。</p>
            <p>2.被邀请用户若购买会员服务，您和被邀请用户将各自获得额外的会员时长，相当于被邀请用户所购买时长的5%。</p>
            <p>3.累计返佣时长一旦超过1年，您可申请将超出部分的时长兑换为现金。兑现公式为：兑现时长÷365天×0.9元（金额将抹零至整数）。您可以使用这笔现金购买网站课程，或联系客服提取现金。</p>
          </div>
    </a-modal>
  </div>
  </div>

  
</template>
<script lang="ts">
 import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
  import { EditOutlined,MoneyCollectOutlined,ShoppingOutlined ,UsergroupAddOutlined,
     InfoCircleOutlined, QuestionCircleOutlined, ShopOutlined, CheckOutlined} from '@ant-design/icons-vue';
  import { PageWrapper } from '/@/components/Page';
  import { computed } from 'vue';
  import { Avatar, Modal ,Card,Tabs,TabPane,List,ListItem,Tooltip} from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import headerImg from '/@/assets/images/header.jpg';
  import { memberinfo,viplist,precreateOrder, getDomain, getUserInfo } from '/@/api/dp/dpbaseapi';
  import OrdercrateAndPay from '/@/views/dp/userorder/ordercreate.vue';
  import UserInfoUpdate from '/@/views/sys/account/userInfo.vue';
  import QYrecordPage from '/@/views/sys/desktop//fontyq.vue';
  import QyjrecordPage from '/@/views/sys/desktop//frontqyj.vue';
  import UserOrderPage from '/@/views/sys/desktop/frontorder.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Icon } from '/@/components/Icon';


  export default defineComponent({
    name: 'dpperson',
    components: {
        ATabs:Tabs,
        ATabPane:TabPane,
        AModal:Modal,
        AAvatar:Avatar,
        ACard:Card,
        AList:List,
        AListItem:ListItem,
        ATooltip: Tooltip
  }
    
  });
</script>
<script lang="ts" setup>
  import { useRoute } from 'vue-router';
  import ClipboardJS from 'clipboard';
  const { showMessage } = useMessage();
  const userStore = useUserStore();
  const userinfo = computed(() => {
    return  userStore.getUserInfo;
  });
   const member=ref({memberinfo:'您还不是会员',buttontext:'购买会员'});
   const viplistdata=ref([]);
   const maxrowheight=ref(1);
   const itemBorder = ref('1px solid #e5e5e5');
   const activeItem = ref(1)
   const visibleRule = ref(false);
   const vipType = ref()
   const copyContent=ref('');
   const clipboardRef = ref();

   onUnmounted(()=>{
      if(clipboardRef.value){
        clipboardRef.value.destroy(); 
      }
   });
   onMounted(()=>{
      if(!clipboardRef.value){
        clipboardRef.value = new ClipboardJS('.copy-btn');
        clipboardRef.value.on('success', () => {
          showMessage('邀请链接已复制到剪贴板'); 
        });
      }
      copyToClipboard();

      var route = useRoute();
      if(route.query&&route.query.vipType){
        vipType.value = route.query.vipType;
        if(vipType.value=='week'){
          activeItem.value = 0
        } else if(vipType.value=='month'){
          activeItem.value = 1
        } else if(vipType.value=='year'){
          activeItem.value = 2
        }
        showModal()
      }

   });

   async function refreshUserCache(){
      let user = await getUserInfo();
      if(user) {
        userStore.setUserInfo(user);
      }
   }

   getmemberinfo();
   async function getmemberinfo(){
      const res=  await memberinfo();
      member.value=res;

      const res2=await viplist();
      viplistdata.value=res2.list;
      maxrowheight.value=res2.maxrow*1.5;
   }
    
  const activeKey=ref('1');
  const visible = ref<boolean>(false);
  
  const visibleB = ref<boolean>(false);
  const showModal = () => {
      visible.value = true;
  };
  
  const orderRef = ref(null);

  const visibleD = ref<boolean>(false);
  const status=ref(0);
  const preorderInfo=ref({});
  async function goorderpage (vipid)  {
      //构建数据
      status.value=0;
      let arrs=[
            {
              ordertype:"1",
              typeid:vipid,
              shuliang:1
            }
      ];

      let  orderobj={
          title:'会员购买',
          orderdetails:arrs
       };
     
      //查询订单 
    
     const preinfo= await precreateOrder(orderobj);
     preorderInfo.value=preinfo;

    visibleD.value = true;
    visible.value = false;
     
  };

  let refreshUserCacheCount = ref(0);
  let refreshUserCacheInterval = ref();
  function orderpaysuccess(){
    visibleD.value = false;
    getmemberinfo(); 
    refreshUserCacheInterval.value = setInterval(async()=> {
      if(refreshUserCacheCount.value>=10) {
        clearInterval(refreshUserCacheInterval.value);
        refreshUserCacheCount.value = 0;
        return;
      }
      await refreshUserCache();
      refreshUserCacheCount.value = refreshUserCacheCount.value+1;
    }, 2000);
  }

  function changeorderstatus(v){
       status.value = v;

   }
  const handleOk = (e: MouseEvent) => {
      console.log(e);
      visible.value = false;
  };
  const onCloseD= (e: MouseEvent) => {
      console.log(e);
      visibleD.value = false;
  };




    function openbaseupdate(){
      visibleB.value=true;
    }
   

   async function copyToClipboard() {
      let domain = await getDomain();
      var user=userinfo.value;
      var tosharetext=user.extend.extendS1;
      let fullUrl;
      if(domain.charAt(domain.length - 1)=='/'){
        fullUrl = domain+'login?state=1&sharecode='+tosharetext
      } else {
        fullUrl = domain+'/login?state=1&sharecode='+tosharetext
      }
      copyContent.value = fullUrl
      // var aux = document.createElement("input"); 
      // aux.setAttribute("value", fullUrl); 
      // document.body.appendChild(aux); 
      // aux.select();
      // document.execCommand("copy"); 
      // document.body.removeChild(aux);
      // showMessage('内容已复制到剪贴板'); 
    }
   
</script>
<style>
  .banner{
    width: 1040px;
    height: 182px;
    border-radius: 8px;
    background: url(../../../assets/images/banner-C0BUkXTL.png) center / cover no-repeat;
    margin: 0 auto 16px
  }

  .rmfn{
    position: absolute;
    right: 0px;
    top: -30px;
    width: 60px;
    height: 60px;
    opacity: 1;
    background: url(../../../assets/images/rm.png) center / cover no-repeat;
  }

  .divscroll{
    overflow: auto; /* 使div可滚动 */
    scrollbar-width: none; /* 对于Firefox */
  }
  .time-youhui{
    margin-left: .5em;
    font-size: 12px;
    color: #000;
    background-color: #FFDC9F;
    padding:0 4px;
    border-radius: 3px;
  }
</style>